<template>
    <div id="operDetail">
        <div class="functionalArea">
            <el-form class="formEmbedTable mt20"  :model="toDetail">
                <table> 
                       <tr>
                        <td>Transaction Sequence No.</td>
                        <td>  {{toDetail.flowNo}}  </td>			
                    </tr>
                    <tr>
                        <td>Submit</td>
                        <td> {{toDetail.userAlias}} </td>
                    </tr>
                </table>
            </el-form>
        </div>
        <div v-if="toDetail.actionType==1">
            <el-form  :model="userInfo" class="formEmbedTable mt20">
                <table>
                    <caption>Modify</caption>
                    <tr>	
                        <td colspan="2" style="text-align:center;">  {{"Before"}} </td>
                        <td colspan="2" style="text-align:center;">  {{"After"}} </td>		
                    </tr>
                    <tr id="userAlias">	
                        <td>Operator Name</td>
                        <td> {{oldUserInfo.userAlias}}  </td>	
                        <td>Operator Name</td>
                        <td>  {{userInfo.userAlias}} </td>		
                    </tr>
                    <tr id="roleName">	
                        <td>Operator Role</td>
                        <td> {{oldUserInfo.roleName}}  </td>	
                        <td>Operator Role</td>
                        <td>{{userInfo.roleName}} </td>		
                    </tr>

                    <tr id="userMobile">
                        <td>Mobile Phone</td>
                        <td>{{oldUserInfo.userMobile}}</td>
                        <td>Mobile Phone</td>
                        <td>{{userInfo.userMobile}}</td>					
                    </tr>
                    <tr id="userStt">
                        <td>Status</td>
                        <td>{{$tools.dict.getUserStt(oldUserInfo.userStt)}}</td>
                        <td>Status</td>
                        <td>{{$tools.dict.getUserStt(userInfo.userStt)}}</td>					
                    </tr>

                    <tr id="branchName">
                        <td>Subbordiante to Department Name</td>
                        <td>{{oldUserInfo.branchName}}</td>
                        <td>Subbordiante to Department Name</td>
                        <td>{{userInfo.branchName}}</td>
                    </tr>
                    <tr id="branchNo">
                        <td>Subbordiante to Department No.</td>
                        <td>{{oldUserInfo.branchNo}}</td>
                        <td>Subbordiante to Department No.</td>
                        <td>{{userInfo.branchNo}}</td>
                    </tr>

                    <tr id="userCertType">
                        <td>Document Type</td>
                        <td>{{$tools.dict.certTypeDict(oldUserInfo.userCertType)}}</td>
                        <td>Document Type</td>
                        <td>{{$tools.dict.certTypeDict(userInfo.userCertType)}}</td>
                    </tr>
                    <tr id="userCertNo">
                        <td>Document No。</td>
                        <td>{{oldUserInfo.userCertNo}}</td>
                        <td>Document No.</td>
                        <td>{{userInfo.userCertNo}}</td>
                    </tr>

                    <tr id="userSex">
                        <td>Sex</td>
                        <td>{{$tools.dict.userSex(oldUserInfo.userSex)}}</td>
                        <td>Sex</td>
                        <td>{{$tools.dict.userSex(userInfo.userSex)}}</td>
                    </tr>
                    <tr id="userDesc">
                        <td>Desciption</td>
                        <td>{{oldUserInfo.userDesc}}</td>
                        <td>Desciption</td>
                        <td>{{userInfo.userDesc}}</td>
                    </tr>
                </table>
            </el-form>
        </div>
        <div v-else>
            <el-form  :model="userInfo" class="formEmbedTable mt20">
                <table>
                    <caption>{{toDetail.actionType==0 ?"Add":"Delete"}}</caption>
                    <tr>	
                        <td>Operator Name</td>
                        <td>{{userInfo.userAlias}}</td>	
                        <td>Operator Role</td>
                        <td>{{userInfo.roleName}}</td>		
                    </tr>
                    <tr>
                        <td>Mobile Phone</td>
                        <td>{{userInfo.userMobile}} </td>
                        <td>Status</td>
                        <td>{{$tools.dict.getUserStt(userInfo.userStt)}}</td>					
                    </tr>
                    <tr>
                        <td>Subbordiante to Department Name</td>
                        <td>{{userInfo.branchName}}</td>
                        <td>Subbordiante to Department No.</td>
                        <td>{{userInfo.branchNo}} </td>
                    </tr>
                    <tr>
                        <td>Document Type</td>
                        <td>{{$tools.dict.certTypeDict(userInfo.userCertType)}}</td>
                        <td>Document No.</td>
                        <td>{{userInfo.userCertNo}}</td>
                    </tr>
                    <tr>
                        <td>Sex</td>
                        <td colspan='3'>{{userInfo.userSex}}</td>
                    </tr>
                    <tr>
                        <td>Desciption</td>
                        <td colspan="3">{{userInfo.userDesc}}</td>
                    </tr>
                </table>
            </el-form>
        </div>
        <div class="btnArea mt20 tac">
            <el-button type="primary" @click="agree()">Approve</el-button>
            <el-button type="primary" @click="rules()">Reject</el-button>
            <el-button type="primary" @click="backMain">Back</el-button>
        </div>
        <!--拒绝页面弹窗-->
        <el-dialog :visible.sync="dialogTableVisible" :close-on-click-modal="false" :close-on-press-escape="false">
            <el-form ref="rejectForm" :model="rejectForm" class="formEmbedTable">
                <table>
                    <caption>Refusal reason</caption>
                    <tr>
                        <td>Refusal reason</td>
                        <td>
                            <el-form-item prop="rejReason">
                                <el-input placeholder="Refusal reason" v-model="rejectForm.rejReason"></el-input>
                            </el-form-item>
                        </td>
                    </tr>
                </table>
                <div class="btnArea mt20 tac">
                    <el-button type="primary" @click="dialogTableVisible = false,reject()">Confirm</el-button>
                </div>
            </el-form>
        </el-dialog>
        <!--拒绝页面弹窗end-->
    </div>
</template>
<script>
 //import ghbIcon from '@src/components/icon'
    export default {
        name:'operDetail',
        components:{
            //ghbIcon,
        },
        props:['detailData','toDetail','oldDetailData'],
        mounted(){
            let userTemp=this.detailData.imUserInfoList[0];
            this.userInfo={}
            this.oldUserInfo={}
            let tep={}
            $.each(userTemp,function(i,n){
                let key=i;
                let val=n.value;
                tep[key]=val;
            })

            let temp={}
            $.each(this.oldDetailData,function(i,m){
                let key=i;
                let val=m.value;
                temp[key]=val;
            })
            this.userInfo=$.extend(this.userInfo,tep)
            this.oldUserInfo=$.extend(this.oldUserInfo,temp)

            this.$tools.utils.compareEdit(this.userInfo,this.oldUserInfo)
        },
        data(){
            return{
                userInfo:{},
                oldUserInfo:{},
                rejectForm:{//审核拒绝列表
                    actionFlag:'',bsnAuthList:[],authFlag:'1',rejReason:''
                },
                agreeForm:{
                    actionFlag:'',bsnAuthList:[],authFlag:'0',
                },
                dialogTableVisible:false,
            }
        },
        methods:{
            compareEdit(form1,form2){//比对修改数据返现
                $.each(form1,function(i,n){
                    //console.log("i:"+i+",n:"+n);
                    $.each(form2,function(j,m){
                        if(i==j){
                            if(n!=m){
                                let id="#"+j;
                                console.log("id:"+id);
                                $(id).children("td:odd").css("color","red");
                            }
                        }
                    })
                    
                })
            },
            backMain(){
                 this.$emit("back")
            },
            rules(){//判断是否选中数据
               this.dialogTableVisible=true;
            },
            agree(){
               //判断是否选中数据
               console.log("toDetail"+JSON.stringify(this.toDetail))
                this.agreeForm.bsnAuthList.push(this.toDetail);
                console.log("agreeForm"+JSON.stringify(this.agreeForm))
                this.$tools.request(this,this.toDetail.bsnCode+"AuthAction.do",this.agreeForm).then(data=>{
                    //console.log("data"+JSON.stringify(data))
                    if(data.body.errorCode==0){
                        this.$message({
                            type:'success',
                            message:'Success',
                            showClose:true,
                        })
                        this.$emit("back")
                    }else{
                        this.$alert("System Error Try again", "warning",{
                            confirmButtonText: 'Confirm',
                            callback: action => {
                            }
                        })
                    }
                })
            },
            reject(){
                this.rejectForm.bsnAuthList.push(this.toDetail);
                console.log("rejectForm"+JSON.stringify(this.rejectForm))
                this.$tools.request(this,this.toDetail.bsnCode+"AuthAction.do",this.rejectForm).then(data=>{
                    if(data.body.errorCode==0){
                        this.$message({
                            type:'success',
                            message:'Success',
                            showClose:true,
                        })
                        this.$emit("back")
                    }else{
                        this.$alert("System Error Try again", "warning",{
                            confirmButtonText: 'Confirm',
                            callback: action => {
                            }
                        })
                    }
                })
            },

        }
    }
</script>
<style>
    
</style>
